<?php ?>
<div id="example" class="k-content">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:{
                        url: "<?php echo $this->Html->Url(array('controller' => 'usuarios', 'action' => 'consultaUsuarios')); ?>",
                        dataType: "json"
                    },
                    update: {
                        url: "<?php echo $this->Html->Url(array('controller' => 'usuarios', 'action' => 'editaUsuario')); ?>",
                        dataType: "json"
                    },
                    destroy: {
                        url: "<?php echo $this->Html->Url(array('controller' => 'usuarios', 'action' => 'desactivaUsuario')); ?>",
                        dataType: "json"
                    },
                    create: {
                        url: "<?php echo $this->Html->Url(array('controller' => 'usuarios', 'action' => 'creaUsuario')); ?>",
                        dataType: "json"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            nombre: { 
                                type: "string", 
                                editable: true, 
                                nullable: false,
                                validation: { required: true }
                            },
                            ap_paterno: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            ap_materno: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            telefono: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            correo: { 
                                type: "string", 
                                editable: true, 
                                nullable: false,
                                validation: { type: "email",
                                              required: true}
                            },
                            direccion: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            },
                            tipo: { 
                                type: "string", 
                                editable: true, 
                                nullable: false, 
                                validation: { required: true }
                            }
                        }
                    }
                }
            });
            
            function tipoUsuario(item) {
                switch(item.tipo) {
                    case "0": return "Recepcionista"
                        break;
                    case "1": return "Cliente"
                        break;
                    case "2": return "Administrador"
                        break;
                    case "3": return "Ingeniero"
                        break;
                }
            }
            
            function comboBoxTipo(container, options) {
                $('<input required data-text-field="title" data-value-field="id" data-bind="value:' + options.field + '"/>')
                    .appendTo(container)
                    .kendoComboBox({
                        autoBind: true,
                        dataValueField: "id",
                        dataTextField: "title",
                        dataSource: { data: [
                            { id: "0", title: "Recepcionista" },
                            { id: "1", title: "Cliente" },
                            { id: "2", title: "Administrador" },
                            { id: "3", title: "Ingeniero" }
                        ]}
                    });
            }
                
            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 430,
                toolbar: ["create"],
                columns: [
                    { field: "nombre", title:"Nombre", width: "200px" },
                    { field: "ap_paterno", title:"Apellido Paterno", width: "100px" },
                    { field: "ap_materno", title:"Apellido Materno", width: "100px" },
                    { field: "telefono", title:"Telefono", width: "100px" },
                    { field: "correo", title:"Correo", width: "100px" },
                    { field: "direccion", title:"Direccion", width: "100px" },
                    { field: "tipo", title:"Tipo", width: "100px", editor: comboBoxTipo, template: tipoUsuario},
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }],
                editable: "popup"
            });
        });
    </script>
</div>
